﻿@using KRM.Core
@{
    ViewBag.Title = "New Order";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var vips = new KRMEntities().tblVIPStatuses.ToList();
    vips.Insert(0, new tblVIPStatus() { Name = "Choose a status" });
    vips.Insert(1, new tblVIPStatus() { Id = 0, Name = "None" });
    ViewBag.VipStatusId = new SelectList(vips, "Id", "Name");
}
<div id="divSelectDeliveryDate" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true" style="width: 1000px; height: 600px;">
    <div class="ajax-loading"></div>
</div>
<div class="container-fluid">
    <div class="box">

        <div class="page-header"></div>
        <div class="row-fluid">
            <div class="span1">Select site</div>
            <div class="span3">
                @Html.DropDownList("StoreId", null, new { @class = "input-block-level", onchange = "SetSelectedStore(this.value)" })
            </div>
            <div class="span3 text-right">
                <a class="btn btn-danger" onclick="ClearAll()">Clear all</a>
            </div>
            <div class="span1 text-right">Total Price</div>
            <div class="span2">
                <input class="input-block-level bold" type="text" style="font-size: 18px" id="TotalOrderPrice" readonly="readonly" />
            </div>
            <div class="span2">
                <input class="input-block-level bold btn btn-primary" style="width: 100%" type="button" value="Confirm Order" onclick="confirmorder()" />
            </div>
        </div>
        <input type="hidden" id="hfPostcode" value="" />
        <ul class="tabs tabs-inline tabs-top orderdetail-task-tabs">
            <li class="active">
                <a href="#orderitem" data-toggle="tab">Order Items</a>
            </li>
            <li>
                <a href="#customerdetail" data-toggle="tab">Customer Details</a>
            </li>
            <li>
                <a href="#delivery" data-toggle="tab">Delivery Options & Summary</a>
            </li>
        </ul>

        <div class="tab-content padding tab-content-inline tab-content-bottom orderdetail-task-tabs-content">
            <div class="tab-pane active" id="orderitem">

                <div class="row-fluid">
                    <fieldset class="span4">
                        <legend>Search</legend>
                        <form action="/orderview/newordersearchproduct" method="POST" class="margin0" id="fr-newordersearchproduct">
                            <input type="hidden" id="hfstoreid" />
                            <div class="row-fluid">
                                <div class="span5">
                                    <input type="text" class="input-block-level" name="productname" id="productname" />
                                </div>
                                <div class="span7">
                                    <input type="submit" class="btn btn-primary" value="Go" />
                                    or 
                                        <input type="button" class="btn btn-primary btn-listallproducts" value="List all Products" />
                                </div>
                            </div>
                        </form>
                        <div class="row-fluid">
                            <select class="input-block-level" multiple="multiple" style="height: 380px" id="lstorderitemproductresult" onchange="orderitemproductresult(this.value)"></select>
                        </div>
                    </fieldset>
                    <fieldset class="span8">
                        <legend>Current Product</legend>
                        <form action="/orderview/neworderaddproducttoorder" method="POST" class="margin0" id="fr-neworderaddproducttoorder">
                            <input type="hidden" name="productid" id="hfproductid" />
                            <div id="pnlCurrentProduct"></div>
                        </form>
                    </fieldset>
                </div>

                <div class="row-fluid">
                    <fieldset>
                        <legend>Order Items</legend>
                        <div class="row-fluid pnorderitemadded">
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="tab-pane" id="customerdetail">
                <form class="fr-searchpostcode">
                    <div class="row-fluid">
                        <div class="span1"><strong>Postcode</strong></div>
                        <div class="span2">
                            <input type="text" name="postcode" class="input-block-level" id="postcode" />
                        </div>
                        <div class="span1 text-right">
                            Surname
                        </div>
                        <div class="span2">
                            <input type="text" name="Surname" class="input-block-level" id="Surname" />
                        </div>
                        <div class="span1 text-right">
                            Email
                        </div>
                        <div class="span2">
                            <input type="text" name="Email" class="input-block-level" id="Email" />
                        </div>
                        <div class="span2">
                            <input type="submit" value="Search Customer" class="btn btn-primary input-block-level" style="width: 100%" />
                        </div>
                    </div>
                </form>
                <div id="pncustomerdetail">
                    <form action="/orderview/SaveCustomerAddress" method="POST" id="fr-customerorderaddress">
                        <div class="row-fluid">
                            <fieldset class="span6">
                                <legend>Customer Delivery Address</legend>
                                <div class="row-fluid">
                                    <div class="span3">Name</div>
                                    <div class="span3">
                                        <select class="input-block-level" name="title" id="title">
                                            <option value="Mr">Mr</option>
                                            <option value="Mrs">Mrs</option>
                                            <option value="Ms">Ms</option>
                                            <option value="Miss">Miss</option>
                                            <option value="Dr">Dr</option>
                                            <option value="Rev">Rev</option>
                                        </select>
                                    </div>
                                    <div class="span3">
                                        <input type="text" class="input-block-level" name="Forename" id="Forename" required="required" />
                                    </div>
                                    <div class="span3">
                                        <input type="text" class="input-block-level" name="Surname" id="shipSurname" required="required" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Address Line1:</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="AddressLine1" id="AddressLine1" required="required" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Address Line2:</div>
                                    <div class="span6">
                                        <textarea class="input-block-level" name="AddressLine2" id="AddressLine2" required="required"></textarea>
                                    </div>
                                    <div class="span3 text-center">
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Town</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="Town" id="Town" required="required" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">County</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="County" id="County" required="required" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Postcode</div>
                                    <div class="span4">
                                        <input type="text" class="input-block-level" name="postcode" id="PostcodeShipping" required="required" />
                                    </div>
                                    <div class="span2">
                                        <input type="button" value="Lookup" class="btn btn-primary input-block-level" onclick="lookuppostcode(false)" style="width: 100%" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Phone</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="phone" id="Phone" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Mobile</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="Mobile" id="Mobile" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3"></div>
                                    <div class="span6">
                                        <label>
                                            <input type="checkbox" class="cbcheck cbSeparate" onchange="SeparateBilling()" name="cbSeparate" />
                                            Separate Billing Address?                 
                                        </label>
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Email</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="emailaddress" id="EmailAddress" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3"></div>
                                    <div class="span7">
                                        <label>
                                            <input type="checkbox" class="cbcheck" name="ReceiveNewsletter" />
                                            Receive Newsletter?                 
                                        </label>
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Vip Status</div>
                                    <div class="span6">
                                        @Html.DropDownList("VipStatusId", null, new { @class = "input-block-level", required = "required" })
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset class="span6 seperatebilling" style="display: none; height: 519px;">
                                <legend>Seperate Billing Address</legend>
                                <div class="row-fluid">
                                    <div class="span3">Name</div>
                                    <div class="span3">
                                        <select class="input-block-level" name="billtitle" id="billtitle">
                                            <option value="Mr">Mr</option>
                                            <option value="Mrs">Mrs</option>
                                            <option value="Ms">Ms</option>
                                            <option value="Miss">Miss</option>
                                            <option value="Dr">Dr</option>
                                            <option value="Rev">Rev</option>
                                        </select>
                                    </div>
                                    <div class="span3">
                                        <input type="text" class="input-block-level" name="billForename" id="billForename" />
                                    </div>
                                    <div class="span3">
                                        <input type="text" class="input-block-level" name="billSurname" id="billSurname" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Address Line1</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="billAddressLine1" id="billAddressLine1" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Address Line2</div>
                                    <div class="span6">
                                        <textarea class="input-block-level" name="billAddressLine2" id="billAddressLine2"></textarea>
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Town</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="billTown" id="billTown" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">County</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="billCounty" id="billCounty" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Postcode</div>
                                    <div class="span4">
                                        <input type="text" class="input-block-level" name="billpostcode" id="billPostcode" />
                                    </div>
                                    <div class="span2">
                                        <input type="button" value="Lookup" class="btn btn-primary input-block-level" onclick="lookuppostcode(true)" style="width: 100%" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Phone</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="billPhone" id="billPhone" />
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">Mobile</div>
                                    <div class="span6">
                                        <input type="text" class="input-block-level" name="billMobile" id="billMobile" />
                                    </div>
                                </div>

                            </fieldset>
                        </div>
                        <div class="row-fluid">
                            <fieldset class="span6" style="height: 129px;">
                                <legend>Payment Details</legend>
                                <div class="row-fluid">
                                    <div class="span3">Payment method</div>
                                    <div class="span4">
                                        <select class="input-block-level" name="cbpayment" id="cbpayment" onchange="javascript:if(this.value == 'Cheque Payment')alert('This order will be saved in the pending phone orders as it is a cheque payment');">
                                            <option value="Credit card">Credit card</option>
                                            <option value="Cheque Payment">Cheque Payment</option>
                                        </select>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset class="span6">
                                <legend>Delivery Instructions</legend>
                                <p>Enter any special delivery instructions below</p>
                                <div class="row-fluid">
                                    <div class="span12">
                                        <textarea class="input-block-level" name="SpecialIns" id="SpecialIns">No Special Instructions supplieds</textarea>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="row-fluid">
                            <div class="span3">
                                <input type="submit" value="Save Customer Details" class="btn btn-primary" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="tab-pane" id="delivery">
                <input type="hidden" id="customerId" />
                <h5 style="color: red;">PLEASE RECONFIRM ALL DETAILS WITH THE CUSTOMER BEFORE CONFIRMING ORDER</h5>
                <div class="row-fluid">
                    <fieldset class="span6" style="height: 220px;">
                        <legend>Contact</legend>
                        <div id="divContactDelivery">
                            Contact address needs to be entered!
                        </div>
                    </fieldset>

                    <fieldset class="span6" style="height: 220px;">
                        <legend>Billing Address</legend>
                        <div id="divBillingDelivery">
                            Billing Address needs to be entered!
                        </div>
                    </fieldset>
                </div>
                <div class="row-fluid">

                    <fieldset>
                        <legend>Order Items</legend>
                        <div class="row-fluid" style="height: 200px; overflow-x: hidden; overflow-y: scroll">
                            <div class="row-fluid" style="background-color: #dcdcdc; height: 20px; border-left: 1px solid #d8d8d8; border-right: 1px solid #d8d8d8; border-top: 1px solid #d8d8d8;">
                                <div class="span9" style="border-right: 1px solid #d8d8d8;">&nbsp; Product</div>
                                <div class="span1" style="border-right: 1px solid #d8d8d8">Cost</div>
                                <div class="span1" style="border-right: 1px solid #d8d8d8">Quantity</div>
                                <div class="span1">Total</div>
                            </div>
                            <div id="divOrderitemsSummary">
                            </div>

                        </div>
                        <hr />
                        <div class="row-fluid">
                            <div class="span6">
                                <div class="row-fluid">
                                    <div class="span4">Orders Items Total</div>
                                    <div class="span8" id="TotalOrderItemsPrice">£0.00</div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span4">Admin charge</div>
                                    <div class="span8" id="AdminChargeValue">£0.00</div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span4">Discount value</div>
                                    <div class="span8" id="TotalDiscountValue">-£0.00</div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span4">Total cost</div>
                                    <div class="span4" id="TotalCost">£0.00</div>
                                    <div class="span4" id="DeliveryCosts"></div>
                                </div>
                            </div>
                            <div class="span6">
                                <div class="row-fluid">
                                    <div class="span9">
                                        <div class="row-fluid">
                                            <div class="span5" style="text-align: right;">Voucher</div>
                                            <div class="span5">
                                                <input onkeyup="ChangeVoucher()" type="text" id="vouchercode" style="width: 150px;">
                                            </div>
                                            <div class="span2" id="IconVoucherInvalid" style="text-align: center;">
                                                <img src="\img\Icon_Danger.png" />
                                            </div>
                                            <div class="span2" id="IconVoucherValid" style="text-align: center; display: none;">
                                                <img src="\img\Icon_OK.png" />
                                            </div>
                                        </div>
                                        <div class="row-fluid">
                                            <div class="span5"></div>
                                            <div class="span7">
                                                <button type="button" class="btn btn-primary" id="btnRemoveVoucher" onclick="RemoveVoucher()" disabled>Remove Voucher</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="span3">
                                        <div class="row-fluid" style="text-align: right;">
                                            <button onclick="issueVoucher()" type="button" class="btn btn-success" style="height: 70px; width: 100px;">Apply Special Discount</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row-fluid" style="text-align: right; display: none;" id="divVoucherMessage">
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>

                <div class="row-fluid">
                    <fieldset class="span9">
                        <legend>Delivery Options</legend>
                        <div class="row-fluid">Chosen Delivery Date: <a id="SelectDeliveryDate" onclick="CheckBeforeSelectDate()">The delivery date hasn't been chosen yet</a></div>
                        <div class="row-fluid" style="margin-top: 5px;">
                            <label>
                                <input type="checkbox" onchange="SelectDeliveryDateCheckedChange()" class="cbcheck" name="chkSelectDate" id="chkSelectDate">
                                I wish to select my own delivery options</label>
                        </div>
                        <div class="row-fluid" style="margin-top: 5px;">
                            <label>
                                <input type="checkbox" name="chkAgree" id="chkAgree" class="cbcheck">
                                Customer argrees woth term and conditions</label>
                        </div>
                    </fieldset>

                    <fieldset class="span3">
                        <legend>Web Tracking</legend>
                        <div class="row-fluid">Website Tracking Code:</div>
                        <div class="row-fluid" style="margin-top: 10px;">
                            <input type="text" />
                        </div>
                    </fieldset>
                </div>

            </div>
        </div>
        <a href="#customerresult" role="button" data-toggle="modal" id="btn-customerresult"></a>
        <div id="customerresult" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="customerresult" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h5>Customer Details</h5>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-fix tbl-selected">
                    <thead>
                        <tr>
                            <th>CustomerID</th>
                            <th>Addresses</th>
                            <th>Customer Email</th>
                        </tr>
                    </thead>
                    <tbody class="row-customerorderaddress">
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="addnewcustomer()">Add new</button>
                <button type="button" class="btn btn-primary btn-selectcustomeraddres" onclick="selectedaddresspostcode()">Use Selected</button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>
        </div>

        <div id="lookuppostcode" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="lookuppostcode" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h5>Lookup Postcode</h5>
            </div>
            <div class="modal-body">
                <form action="/orderview/LookupPostcode" id="fr-lookuppostcode" class="margin0">
                    <input type="hidden" name="shipping" id="hfshipping" />

                    <div class="row-fluid">
                        <div class="span2">Postcode</div>
                        <div class="span3">
                            <input type="text" name="postcode" class="input-block-level" id="txtPostcodelookup" required="required" />
                        </div>
                        <div class="span2">
                            <input type="submit" value="Lookup" class="btn btn-primary" />
                        </div>
                        <div class="span5 text-center" style="color: red">
                            REMINDER : Only use the Lookup button when necessary 
                            <br />
                            (All lookups incur a cost)
                        </div>
                    </div>
                    <div class="row-fluid">
                        <select class="input-block-level" style="height: 150px" multiple="multiple" id="lookupresult"></select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-selectedaddresslookup" onclick="selectedaddresslookup()">Use Selected</button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>
        </div>


        <div id="adiusprice" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="adiusprice" aria-hidden="true">
            <form action="/orderview/LookupPostcode" id="fr-adiusprice" class="margin0">
                <input type="hidden" id="hforderitemindex" name="orderitemid" />
                <input type="hidden" name="qty" id="hfqty" />
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h5>Adiust Item Price</h5>
                </div>
                <div class="modal-body">
                    <div class="row-fluid">
                        <div class="span4">Existing Total Price</div>
                        <div class="span3">
                            <input type="text" class="input-block-level" disabled="disabled" id="ExistingTotalPrice" />
                        </div>
                    </div>
                    <fieldset>
                        <legend>New Price</legend>
                        <div class="row-fluid">
                            <div class="span3">
                                <input type="text" class="input-block-level text-right" id="NewPrice" name="price" />
                            </div>
                            <div class="span1">
                                <input type="text" class="input-block-level text-right" id="AdiustQuantity" readonly="readonly" />
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                </div>
            </form>
        </div>

        <div id="servicecheck" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="adiusprice" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close servicecheckclose" data-dismiss="modal" aria-hidden="true">x</button>
                <h5>Services Check And Product Info</h5>
            </div>
            <div class="modal-body pnservicecheck">
            </div>
        </div>
        <div id="divIssuevoucher" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true" style="width: 450px;">
        </div>


        <div id="paymenttaken" class="modal hide fade" role="dialog" aria-labelledby="adiusprice" aria-hidden="true" style="width: 640px">
            <div class="modal-body">
                <iframe width="600" height="378" frameborder="0" id="fr-payment"></iframe>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary btn-paymentstatus" onclick="continueconfirmorder(0)">Ok</button>
            </div>
        </div>
        
        <div id="customproduct" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="customproduct" aria-hidden="true">
            <form action="/orderview/AddCustomproduct" id="fr-customproduct" class="margin0">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h5>Custom product</h5>
                </div>
                <div class="modal-body">
                    <div class="row-fluid">
                        <div class="span3">Company Name</div>
                        <div class="span9">
                            @Html.DropDownList("CompanyID", null, new {@class = "input-block-level"})
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span3">
                            Product Name
                        </div>
                        <div class="span9">
                            <input type="text" name="ProductName" class="input-block-level"/>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span3">
                            Sub Options
                        </div>
                        <div class="span9">
                            <textarea name="suboptions" class="input-block-level"></textarea>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span3">
                            Price £
                        </div>
                        <div class="span3">
                            <input type="text" name="price" class="input-block-level" id="customprice"/>
                        </div>
                        <div class="span3 text-right">
                            Quantity
                        </div>
                        <div class="span3">
                            <input type="number" name="qty" class="input-block-level" value="1" id="customqty" />
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span3">
                            Total Price £
                        </div>
                        <div class="span3">
                            <input type="text" name="price" class="input-block-level" disabled="disabled" id="customtotalprice"/>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Add to Order</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
